<template>
  <div class="result-page">
    <!--<img src="@/assets/images/back-btn.png" alt="" class="back-btn scale-on-active" @click="$router.push({name: 'confirm', query: {id: $route.query.id}})"/>-->
    <img src="@/assets/images/result-retry-btn.png" alt="" class="retry-btn scale-on-active" @click="retry"/>
    <img src="@/assets/images/result-share-btn.png" alt="" class="share-btn scale-on-active" @click="share"/>
    <photo-preview :src="(result[$route.query.id] || {}).src" ref="preview" hasQRCode class="photo-preview" :style="{width: width + 'px', height: height + 'px'}"></photo-preview>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'resultPage',
  data: () => ({
    width: 0,
    height: 0
  }),
  created () {
    window._hmt.push(['_trackEvent', '结果页', 'view', '进入结果页'])
    // 处理图片大小，充当calc效果
    let h = window.innerHeight - window.innerWidth * 0.3
    let w = h * 0.54
    if (w >= window.innerWidth * 0.84) {
      this.width = window.innerWidth * 0.84
      this.height = this.width / 0.54
    } else {
      this.width = w
      this.height = h
    }
  },
  methods: {
    share () {
      window._hmt.push(['_trackEvent', '结果页-分享照片', 'click', '点击分享照片'])
      // 分享的代码，用于点击分享时使用
      let base64 = this.$refs.preview.sharePhoto()
    },
    retry () {
      window._hmt.push(['_trackEvent', '结果页-重新上传', 'click', '点击重新上传'])
      this.$router.push({name: 'upload'})
    }
  },
  computed: {
    ...mapGetters([
      'result'
    ])
  }
}
</script>

<style lang="scss">
  .result-page {
    position: relative;
    background: {
      image: url(~@/assets/images/result-bg.png);
      size: cover;
      position: center;
    }
    .photo-preview {
      position: absolute;
      width: 461px;
      height: 840px;
      top: 36%;
      left: 50%;
      transform: translate(-50%, -40%);
    }
    .back-btn {
      position: absolute;
      width: 139px;
      height: 87px;
      top: 26px;
      left: 40px;
    }
    .retry-btn {
      position: absolute;
      bottom: 63px;
      left: 79px;
      width: 283px;
      height: 100px;
    }
    .share-btn {
      position: absolute;
      bottom: 61px;
      right: 71px;
      width: 292px;
      height: 100px;
    }
  }
</style>
